<template>
	<view class="container">
		<!--
		<u-skeleton rows="15" :loading="loading1" :title="false"  :rowsWidth="[530,560,690,360,480,690,670,560,690,560,680,490,530,600,680]" :rowsHeight="[35,40,120,35,40,120,35,40,120,60,76,65,100,85,80]">
			-->
			<view class="topBar">
				<view class="header">
					<view class="goBack" @click="goBack"><</view>		
					<view class="title">{{title}}</view>
					<view class="share t-icon t-icon-qita" @click="open"></view>
				</view>
				<!--
				<u-popup :show="show" mode="bottom"  @close="close">
					<view>
						<text>人生若只如初见，何事秋风悲画扇</text>
					</view>
				</u-popup>
				-->
				
			</view>
			
			<view class="listArea" :style="{height: mainHeight+'px', top:topBar*1.05+'px'}">
				<view class="everCard" v-for="(item, index) in info" :key="index" @click="seeHome(item.id)">
					<!--这里加个vip的logo-->
					<view class="avatar">
						<image :src="item.avatar"></image>
					</view>
					
					<view class="info">
						<view class="name">
							{{item.nickname}}
						</view>
						<view class="intro">
							{{item.introduce}}
						</view>
					</view>
					
					<view class="bottomArea">
						<view v-if="title=='关注'"  class="commonBottom" :class="[item.isConcern == true? 'bottom_concern':'bothConcern']" @click="deleteConcern(item.isConcern, item.id), item.isConcern = !item.isConcern">
							{{item.isConcern == true?"已关注":"关注"}}
						</view>
						<view v-if="title=='粉丝'"  class="commonBottom" :class="[item.isConcern == true? 'bothConcern':'bottom_fans']" @click="item.isConcern = !item.isConcern, concern(item.isConcern, item.id)">
							{{item.isConcern == true?"已互粉":"关注"}}
						</view>
					</view>
				</view>
			</view>
			<!--
		</u-skeleton>	
		-->
	</view>
</template>

<script>
	export default{
		data(){
			return {
				loading1:false,
				info:{},
				title: undefined,
				show: false,
				topBar:0,
				mainHeight:0,
				page:0,
				pageSize:0,
				token: this.$store.state.loginUser.token,
				concernDeleted:new Set(), //放置一次进入中待删除的关注者id，在页面退出时完成删除
				fansConcerned:new Set(), //临时存放互粉的粉丝，在退出页面时完成数据库中的加入
			}
		},
		methods:{
			goBack(){
				uni.navigateBack({
					delta:1,
					animationType:'slide-out-left',
					animationDuration:300
				})
			},
			close(){
				this.show = false
			},
			open(){
				this.show = true
			},
			init(){
				uni.getSystemInfo({
					success: (res) => {
						this.topBar = res.screenHeight*0.08;
						this.mainHeight = 0.91*res.screenHeight;
					}
				})
			},
			deleteConcern(concern, id){
				let that = this;
				if(concern == true){
					that.concernDeleted.add(
						that.info.find(object => object.id == id).id
					)
				}else{
					 that.concernDeleted.delete(id)
				}
			},
			concern(concern, id){
				let that = this;
				if(concern == false){
					that.fansConcerned.add(
						this.info.find(object => object.id == id).id
					)
				}else{
					that.fansConcerned.delete(id)
				}
			},
			seeHome(id){
				uni.navigateTo({
					url: '../aboutMe?id='+id
				});
			}
		},
		onLoad(options) {
			this.title = JSON.parse(decodeURIComponent(options.kind)) == 1?"关注":"粉丝"
			this.info = JSON.parse(decodeURIComponent(options.info))
			console.log("info",this.info)
			this.init()
		},
		onUnload() {
			if(this.title == "关注"){
				uni.request({
					methods:"DELETE",
					url:"",
					header: this.token,
					data:{
						needChange: Array.from(this.concernDeleted) //...this.concernDeleted
					}
				}).then(res => {
					if(res.data.status == 200){
						console.log("取关成功")
					}
				})
			}else{
				uni.request({
					methods:"DELETE",
					url:"",
					header: this.token,
					data:{
						needChange: Array.from(this.fansConcerned)
					}
				}).then(res => {
					if(res.data.status == 200){
						console.log("取关成功")
					}
				})
			}
		}
	}
</script>

<style scoped>
	.topBar{
		position: fixed;
		height: 8%;
		width: 100%;
		border-bottom: 1rpx solid rgba(229, 229, 229, 0.8);
	}
	.header{
		position: relative;
		top: 50%;
		width: 100%;
		height: 50%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.goBack{
		position: relative;
		left: 3%;
		font-size: 2.3rem;
		margin-left: 20rpx;
		color: rgba(100, 100, 100, 1.0);
	}
	.title{
		font-size: 1.1rem;
	}
	.share{
		margin-right: 30rpx;
		width: 40rpx !important;
		height: 40rpx !important;
	}
	.listArea{
		position: relative;
		height: 91%;
		width: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	.everCard{
		display: flex;
		align-items: center;
		width: 100%;
		height: 160rpx;
		padding: 20rpx;
		border-bottom: 1rpx solid rgba(206, 206, 206, 0.3);
	}
	.avatar{
		position: relative;
		top: -26rpx;
		left: 0%;
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 2rpx solid white;
		box-shadow: 2rpx 4rpx 10rpx rgba(211, 211, 211, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.avatar>image{
		width: 100rpx;
		height: 100rpx;
	}
	.info{
		flex-direction: column;
		position: relative;
		top: -3%;
		left: 2%;
		height: 120rpx;
		width: 60%;
	}
	.name{
		position: relative;
		
		font-size: 1rem;
		font-weight: bold;
	}
	.intro{
		display: -webkit-box;
		word-wrap: break-all;
		word-break: normal;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
		position: relative;
		width: 90%;
		height: 100rpx;
		font-size: 0.8rem;
		color: rgba(159, 159, 159, 0.8);
	}
	.bottomArea{
		position: relative;
		width: 110rpx;
		height: 60rpx;
		left: 3%;
		border-radius: 60rpx;
		overflow: hidden;
		border: 2rpx solid rgba(245, 243, 248, 1.0);
		color: white;
		font-weight: 400;
	}
	
	.commonBottom{
		font-size: 0.7rem;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		box-shadow: 2rpx 4rpx 10rpx rgba(211, 211, 211, 0.8);
	}
	.bottom_concern{
		background-color: lightskyblue;
		color: white;
	}
	.bottom_fans{
		background-color: white;
		color: black;
	}
	.bothConcern{
		background-color: rgba(248, 248, 248, 0.8);
		/*border: 1rpx solid grey;*/
		box-shadow: 2rpx 4rpx 10rpx rgba(211, 211, 211, 0.8);
		color: grey !important;
	}
</style>